<!-- 教练列表 -->
<template>
  <div class="margin-top-20">
    <div class="flex justify-end">
      <el-row class="">
        <el-col :span="5">
          <el-input
            v-model="searchForm.venue"
            placeholder="请输入场馆名称"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入姓名"
          ></el-input>
        </el-col>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <router-link to="/CoachEditor">
          <el-button type="primary">添加教练</el-button>
        </router-link>
      </el-row>
    </div>
    <div class="margin-top-20">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="signature" label="签名"></el-table-column>
        <el-table-column prop="genius" label="标签"></el-table-column>
        <el-table-column prop="workTime" label="工作时长"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.status == 0">正常</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="handleView(row.id)">查看</el-button>
            <el-button type="text" @click="handleEdit(row.id) ,(dialogVisible2 = true)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="margin-top-20 flex justify-end">
      <el-pagination
        v-if="pagination.total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next"
      />
    </div>
    <!-- 编辑添加对话框 -->
    <el-dialog v-model="dialogVisible2" :title="title" width="30%">
      <el-form
        :model="ruleForm2"
        label-width="200px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
        ><el-form-item label="会员等级名称：">
          <el-col :span="12">
            <el-input v-model="ruleForm2.name" />
          </el-col>
        </el-form-item>
        <el-form-item label="成长值积分：">
          <el-col :span="12">
            <el-input v-model="ruleForm2.discount" />
          </el-col>
        </el-form-item>
        <el-form-item label="设为默认会员等级：">
          <el-radio-group v-model=ruleForm2.defaultUse>
            <el-radio label="是"  />
            <el-radio label="否"  />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="折扣：">
          <el-col :span="8">
            <el-input v-model="ruleForm2.integralRequirement" />
          </el-col>
          <el-col :span="1">
            <div class="deep">%</div>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="(dialogVisible2 = false), submit()">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive,computed,onMounted,ref } from "vue";
import hooks from "../../hooks/userManagement";
import coachStore from "../../store/coachStore";

const store = coachStore();

const dialogVisible2 = ref(false);
const searchForm = reactive({
  name: "",
  venue: "",
});

const tableData = computed(()=>store.getCoachList);
const pagination = {
  total: 0,
  pageSize: 10,
  currentPage: 1,
};

const fetchData = ()=>{
  hooks.coachFindAll()
  console.log(tableData);
  
};

const handleSearch = () => {
  fetchData();
};

const handleAddCoach = () => {
  // handle add coach
};

const handleView = () => {
  // handle view coach
};

const handleEdit = () => {
  // handle edit coach
};

const handleDelete = () => {
  // handle delete coach
};

const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  fetchData();
};

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page;
  fetchData();
};
onMounted(()=>{
  fetchData()
})
</script>